<template>
  <el-dialog
    v-model="dialogFormVisible"
    :title="dialogTitle"
    width="500"
    @close="handleClose"
  >
    <el-form
      :model="formData"
      ref="formRef"
      :rules="rules"
      label-position="right"
      label-width="120px"
      size="default"
      :scroll-to-error="true"
      inline-message
    >
      <el-form-item
        label="关联会员"
        prop="user_id"
        class="label-right-align"
        label-width="120px"
        :disabled="formData.user_id"
        required
      >
        <el-select
          v-model="formData.user_id"
          filterable
          remote
          placeholder="输入用户ID/昵称/姓名/手机号进行搜索"
          remote-show-suffix
          :remote-method="searchUser"
          :loading="search_loading"
          style="width: 240px"
          default-first-option
        >
          <el-option
            v-for="item in userOptions"
            :key="item.user_id"
            :label="item.real_name ? item.real_name : item.nickName"
            :value="item.user_id"
          />
        </el-select>
      </el-form-item>
      <el-form-item
        label="姓名"
        prop="real_name"
        class="label-right-align"
        label-width="120px"
        required
      >
        <el-input
          v-model="formData.real_name"
          placeholder="请输入员工真实姓名"
          type="text"
          clearable
        ></el-input>
      </el-form-item>
      <el-form-item
        label="手机"
        prop="mobile"
        class="label-right-align"
        label-width="120px"
        required
      >
        <el-input
          v-model="formData.mobile"
          placeholder="请输入员工手机号"
          type="text"
          clearable
        ></el-input>
      </el-form-item>
      <el-form-item
        label="选择部门"
        prop="department_id"
        class="required label-right-align"
        label-width="120px"
      >
        <el-tree-select
          v-model="formData.department_id"
          :data="department_options"
          :default-expand-all="true"
          :expand-on-click-node="false"
          :check-strictly="true"
          style="width: 240px"
          :check-on-click-node="true"
          filterable
          :props="{ label: 'title', value: 'id' }"
        />
      </el-form-item>
      <el-form-item
        label="职位"
        prop="type"
        class="required label-right-align"
        label-width="120px"
      >
        <el-radio-group v-model="formData.type">
          <el-radio :value="0">普通员工</el-radio>
          <el-radio :value="1">主管</el-radio>
          <el-radio :value="2">经理</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item
        label="选择岗位"
        prop="station_id"
        class="label-right-align"
        label-width="120px"
      >
        <el-select v-model="formData.station_id" style="width: 240px">
          <el-option
            v-for="item in station_options"
            :key="item.id"
            :label="item.title"
            :value="item.id"
          />
        </el-select>
      </el-form-item>
      <el-form-item
        label="工号"
        prop="job_id"
        class="label-right-align"
        label-width="120px"
      >
        <el-input
          v-model="formData.job_id"
          placeholder="不输入则默认生成"
          type="text"
          clearable
        ></el-input>
      </el-form-item>
      <el-form-item label="需要住宿">
        <el-radio-group v-model="formData.is_hostel">
          <el-radio :value="0">不需要</el-radio>
          <el-radio :value="1">需要</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="暂住证">
        <el-radio-group v-model="formData.residence_permit">
          <el-radio :value="0">未办理</el-radio>
          <el-radio :value="1">已办理</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item
        label="民族"
        prop="nation"
        class="required label-right-align"
      >
        <el-select v-model="formData.nation" style="width: 240px" filterable>
          <el-option
            :value="item"
            v-for="(item, index) in nations"
            :key="index"
            >{{ item }}</el-option
          >
        </el-select>
      </el-form-item>
      <el-form-item
        label="籍贯"
        prop="native_place"
        class="required label-right-align"
      >
        <el-cascader v-model="formData.native_place" :options="regions" />
      </el-form-item>
      <el-form-item
        label="入职时间"
        prop="join_time"
        class="label-right-align"
        label-width="120px"
      >
        <el-date-picker
          v-model="formData.join_time"
          type="date"
          placeholder="请选择入职时间"
          value-format="YYYY-MM-DD"
        />
      </el-form-item>
      <el-form-item
        label="转正时间"
        prop="regular_time"
        class="label-right-align"
        label-width="120px"
      >
        <el-date-picker
          v-model="formData.regular_time"
          type="date"
          placeholder="请选择转正时间"
          value-format="YYYY-MM-DD"
        />
      </el-form-item>
      <el-form-item
        label="离职时间"
        prop="leave_time"
        class="label-right-align"
        label-width="120px"
      >
        <el-date-picker
          v-model="formData.leave_time"
          type="date"
          placeholder="请选择离职时间"
          value-format="YYYY-MM-DD"
          disabled
        />
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="dialogClose">关闭</el-button>
        <el-button type="primary" @click="submitForm"> 提交 </el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup lang="ts">
import {
  ref,
  reactive,
  defineExpose,
  defineEmits,
  onMounted,
  watch,
} from "vue";
import { ElMessage } from "element-plus";
import { getUserOption } from "@/api/user";
import {
  addDepartment,
  editDepartment,
  getDepartmentForm,
  getDepartmentOptionsApi,
} from "@/api/company/department";
import { getFormApi, saveApi } from "@/api/company/staff";
import { getListAPi } from "@/api/company/station";
import { getRegionOption, getNationsOption } from "@/api/utils";
const dialogFormVisible = ref(false);
const formRef = ref<any>(null);
const dialogTitle = ref("");
const formData = ref({
  user_id: "",
  real_name: "",
  job_id: "",
  type: 0,
  mobile: "",
  join_time: "",
  department_id: 0,
  station_id: "",
  regular_time: "",
  leave_time: "",
  is_hostel: 0,
  residence_permit: 0,
  nation: "",
  native_place: [],
});

const rules = reactive({
  user_id: [
    {
      required: true,
      message: "请选择会员",
    },
  ],
  department_id: [
    {
      required: true,
      message: "请选择部门",
    },
  ],
  real_name: [
    {
      required: true,
      message: "请输入姓名",
    },
  ],
  mobile: [
    {
      required: true,
      message: "请输入手机号",
    },
  ],
  type: [
    {
      required: true,
      message: "请选择用户类型",
    },
  ],
  join_time: [
    {
      required: true,
      message: "请选择入职时间",
    },
  ],
});

const search_loading = ref(false);
const userOptions = ref<any[]>([]);
const department_options = ref<any[]>([]);
const station_options = ref<any[]>([]);
const regions = ref<any[]>([]);
const nations = ref<any[]>([]);
watch(
  () => formData.value.department_id,
  (newval: number) => {
    if (newval) {
      getListAPi({
        department_id: newval,
      }).then((res) => {
        station_options.value = res.data;
      });
    } else {
      station_options.value = [];
    }
  }
);
const searchUser = (query: string) => {
  if (query !== "") {
    search_loading.value = true;
    getUserOption({
      keyword: query,
    }).then((res: any) => {
      if (res.code == 1) {
        userOptions.value = res.data;
        search_loading.value = false;
      }
    });
  } else {
    userOptions.value = [];
  }
};

function getInfo(id: number) {
  getFormApi(id)
    .then((res: any) => {
      if (res.code == 1) {
        formData.value = res.data;
        searchUser("" + formData.value.user_id);
      } else {
        ElMessage.error(res.msg);
      }
    })
    .catch((err) => {});
}

async function submitForm() {
  formRef.value.validate().then(() => {
    saveApi(formData.value)
      .then((res) => {
        ElMessage.success("操作成功");
        getTableList();
        dialogClose();
      })
      .catch((err) => {});
  });
}

const dialogClose = () => {
  dialogFormVisible.value = false;
};

const dialogOpen = (user_id: number, department_id: number) => {
  dialogFormVisible.value = true;
  formData.value.department_id = department_id;
  if (user_id > 0) {
    dialogTitle.value = "编辑员工";
    getInfo(user_id);
  } else {
    dialogTitle.value = "添加员工";
  }
};

const handleClose = () => {
  formRef.value.resetFields();
  formData.value = {
    user_id: "",
    real_name: "",
    job_id: "",
    type: 0,
    mobile: "",
    join_time: "",
    department_id: 0,
    station_id: "",
    regular_time: "",
    leave_time: "",
    residence_permit: 0,
    is_hostel: 0,
    nation: "",
    native_place: [],
  };
  dialogFormVisible.value = false;
};

// 打开添加数据窗口
const emits = defineEmits(["getTable"]);
function getTableList() {
  getOptions();
  emits("getTable");
}

function getOptions() {
  getDepartmentOptionsApi().then((res) => {
    department_options.value = res.data;
  });
  getRegionOption().then((res: any) => {
    if (res.code == 1) {
      regions.value = res.data;
    }
  });
  getNationsOption().then((res: any) => {
    if (res.code == 1) {
      nations.value = res.data;
    }
  });
}
onMounted(() => {
  getOptions();
});

defineExpose({
  dialogOpen,
});
</script>

<style lang="scss">
.el-form-item {
  margin-bottom: 10px;
}
</style>

<style lang="scss" scoped></style>
